<script lang="ts" setup name="MoneyDetail">
import {useRouter} from 'vue-router';
const router = useRouter();
const value1 = ref(0);
const value2 = ref(0);
const title1 = ref('');
const title2 = ref('');
const options1 = [
  { text: '全部', value: 0 },
  { text: 'RS1', value: 1 },
  { text: 'RS2', value: 2 },
];
const options2 = [
  { text: '全部', value: 0 },
  { text: '禁用', value: 1 },
  { text: '启用', value: 2 },
];
title1.value=options1[0].text
title2.value=options2[0].text
const  handelChange=(value,type)=>{
  if(type==1){
    title1.value=options1.filter(item => item.value === value)[0].text
  }else{
    title2.value=options2.filter(item => item.value === value)[0].text
  }

}
const  handleDetail=()=>{
  router.push("/singleMoneyDetail")
}

</script>
<template>
  <nav-header class="header" title='资产明细'></nav-header>
  <div class="content">
    <van-dropdown-menu active-color="#1642F4" ref="menuRef">
      <van-dropdown-item  v-model="value1" @change='handelChange($event,1)'  :options="options1" >
        <template #title>
          <span class="fitler-classify">币种:</span>
          <span class="fitler-title">{{title1}}</span>
        </template>
      </van-dropdown-item>
      <van-dropdown-item  v-model="value2" @change='handelChange($event,2)'  :options="options2" >
        <template #title>
          <span class="fitler-classify">状态:</span>
          <span class="fitler-title">{{title2}}</span>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="list">
      <div class="list-item" v-for="(item,index) in 5" @click="handleDetail">
        <div class="info">
          <div class="label">存入资金</div>
          <div class="value">+10,000.00 RS</div>
        </div>
        <div class="status">
          <div class="label">14:22:34 21/09/23</div>
          <div :class="['value',index==0?'colorBlue':'colorYellow']">已到账</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.content{
  padding:0px 10px 10px 10px;
  .van-dropdown-menu{
    display: inline-block;
    :deep(.van-dropdown-menu__bar){
      box-shadow: none;
    }
    .fitler-classify{
      font-weight: 400;
      font-size: 7px;
      color: #777777;
      margin-right: 2px;
    }
    .fitler-title{
      font-weight: 400;
      font-size: 7px;
      color: #2C2C2C;
    }
    :deep(.van-dropdown-menu__item){
      margin-right: 10px;
     }
    :deep(.van-dropdown-menu__title--active){
      color: #2C2C2C !important;
    }
    :deep(.van-dropdown-menu__title){
      padding-left: 0;
      &:after{
        border-color: transparent transparent #2C2C2C #2C2C2C;
      }
    }
  }
  .list{
    &-item{
      min-height: 33px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      &:after{
        position: absolute;
        content: '';
        width: 100%;
        height: 0.5px;
        background: #EDEDED;
        bottom: 0;
        left: 0;
      }
       .info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;
          .label{
            font-weight: bold;
            font-size: 7px;
            color: #2C2C2C;
          }
          .value{
            font-weight: bold;
            font-size: 7px;
            color: #2C2C2C;
          }
       }
       .status{
         display: flex;
         justify-content: space-between;
         align-items: center;
         .label{
           font-size: 6px;
           color: #777777;
           line-height: 1;
         }
         .value{
           font-size: 6px;
           color: #FF9900;
           line-height: 1;
         }
       }
    }
  }
}


</style>
